vlwkaos' digital garden

DOM ready events considiered harmful

function init() {
    //...
}

// jquery시절
$(function() {
    init();
});

// 지금은

document.addEventListener('DOMContentLoaded', () => {
    init();
});

아래 방식도 오래됨, 이벤트 네이밍 컨벤션이 지금은 바뀐 것을 알 수 있다.

이걸 쓰지 마라. 왜?

  • 성능
  • 모듈 호출하는 기본 html 템플릿.

[[Pasted image 20221024081432.png]]

처음엔 괜찮은데 나중에 analytics등으로 밑에 스크립트가 자동으로 붙게 되면..?

일단 tldr은 defer을 써라 DOMReady쓰지 마라

스펙을 보면

  1. document의 readyState는 interactive하게 된다.
  2. 스타일시트 로드 기다린다.
  3. defer 스크립트가 모두 순차적으로 돌기를 기다린다.
  4. 'DOMContentLoaded' 이벤트 변경 시작
  5. request처리를 모두 기다린다. (이미지 등등)
  6. 'pageshow' event
  7. Document의 readyState은 'complete' 이 된다.
  8. 'load' 이벤트 발행

module script는 deferred가 기본

그럼 왜 생겼나?

1997 IE4에서 생긴기능. 버그가 있었다.

순서는 1,3,2...?

15년동안 안고쳐짐. IE10에서 고쳐짐

defer가 항상 좋지는 않다.

animation이나 content가 많은 경우 defer는 성능을 오히려 저하시킬 수 있다. 이전에 페이지를 보여주고 애니메이션을 보여주고싶다면

필요한 경우 비동기 요청 async를 쓰자.

근데 비동기다보니까 너무 queue뒤쪽으로..

크롬에는 fetchpriority 생김

TargetedDOMReady

console.log(this.innerHTML) 이 connectedCallback에 있으면?

async라서 어떤게 먼저 로딩되냐에 따라 다름.

  • 문서가 먼저 로딩되고 스크립트 로딩되는 경우 출력됨
  • 스크립트가 먼저 로딩되는 경우.. x

parser가 처리를 어떻게 하냐...

this element is complete 라는 개념이 없음..

custom-element를 내부에 넣어서 이벤트 연결을 알 수 있는 hack.

주시하는 방법

  • MutationObserver
  • 이걸로 찾아서 animation 바로바로

Referred in

DOM ready events considiered harmful